$border-color:#e0e0e0;//input边框颜色
$border-color-hover:#cccccc;//input边框hover颜色
$border-color-focus:#006FD3;//input边框focus颜色
$placeholder-color:#a9a9a9;//placeholder字体颜色

$dropdown-icon-color:#006FD3;//下拉框图标颜色

$disabled-bg:#DDDDDD;//禁用状态背景色
$disabled-border:#cccccc;//禁用状态边框色
$disabled-color:#a9a9a9;//禁用状态字体色


$form-red:#C73036;//必填表单验证色



.dd-form-bg{
  background: #f5f5f5;
  padding: 20px 20px 0 20px;
}
.dd-form-column-two{
  padding: 0 120px;
}
//input基础样式
//*******************************
.el-input__inner {
  -webkit-appearance: none;
  background-color: #FFF;
  background-image: none;
  border-radius: 4px;
  border: 1px solid $border-color;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #2f2f2f;
  display: inline-block;
  font-size: inherit;
  height: 36px;
  line-height: 34px;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  width: 100%;
}
.el-input__inner::-webkit-input-placeholder {
  color: $placeholder-color;
}

.el-input__inner:-ms-input-placeholder {
  color: $placeholder-color;
}

.el-input__inner::-ms-input-placeholder {
  color: $placeholder-color;
}

.el-input__inner::placeholder {
  color: $placeholder-color;
}

.el-input__inner:hover {
  border-color: $border-color-hover;
}

.el-input.is-active .el-input__inner, .el-input__inner:focus {
  border-color: $border-color-focus;
  outline: 0
}
.el-input__icon{
  line-height: 36px;
}
.el-input.is-disabled .el-input__inner{
  background-color: $disabled-bg;
  border-color: $disabled-border;
  color: $disabled-color;
}
.el-input.is-disabled .el-input__icon.el-select__caret{
  color: $disabled-color;
}
.el-input.is-disabled .el-input__icon{
  color: $disabled-color;
}

//下拉选择框
//*******************************
.el-autocomplete{
  width: 100%;
  .el-input__icon{
    color: $dropdown-icon-color;
    font-size: 18px;
  }
}
.el-autocomplete-suggestion li.highlighted, .el-autocomplete-suggestion li:hover{
  background: $cell-color;
  color: #ffffff;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
  background: $cell-color;
  color: #ffffff;
}
.el-autocomplete-suggestion .el-scrollbar__wrap{
  margin-bottom: 0!important;
}
.my-autocomplete{
  .el-autocomplete-suggestion__wrap{
    margin-bottom: 0 !important;
  }
}

.el-select .el-input.is-focus .el-input__inner{
  border-color: $border-color-focus;
}

.el-select-dropdown{
  .el-select-dropdown__wrap{
    margin-bottom: 0 !important;
  }
  .el-select-dropdown__item.selected,.el-select-dropdown__item:hover{
    background: $cell-color;
    color: #ffffff;
  }
}
.el-select .el-input__inner:focus{
  border-color: $border-color-focus;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected{
  color: $border-color-focus;
}

//时间选项
//*******************************
.el-form--inline .dd-select{
  display: flex;
  flex-direction: row;
}
.el-select .el-input .el-select__caret{
  color: $dropdown-icon-color;
  font-size: 18px;
}

.el-date-table td.current{
  background: $cell-color;
  span{
    color: #ffffff;
    background: transparent;
  }
}
.el-date-table td.today span{
  color: $border-color-focus;
}
.el-date-table td.current:not(.disabled) span{
  background: transparent;
}
.el-date-table td span:hover{
  color: $cell-color;
}
.el-date-table td:hover{
  background: #f5f5f5;
  color: $border-color-focus;
}
.el-date-table td.available:hover{
  color: $border-color-focus;
}
.el-time-panel__btn.confirm{
  color: $border-color-focus;
  &:hover{
    color: $cell-color-hover;
  }
}
.el-month-table td.current:not(.disabled) .cell{
  color: $border-color-focus;
}
.el-year-table td .cell:hover, .el-year-table td.current:not(.disabled) .cell{
  color: $border-color-focus;
  background: #f5f5f5;
}
.el-month-table td .cell:hover{
  color: $border-color-focus;
  background: #f5f5f5;
  border-radius: 0;
}
.el-year-table td.today .cell{
  background: $border-color-focus;
  color: #ffffff;
}

.el-date-picker__header-label:hover{
  color: $border-color-focus;
}

//开关
//*******************************
.el-switch__core{
  background: #dddddd;
  border-color: #dddddd;
}
.el-switch.is-checked .el-switch__core{
  background: $border-color-focus;
  border-color: $border-color-focus;
}

//多选
//*******************************
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
  background: $border-color-focus;
  border-color: $border-color-focus;
}
.el-checkbox__input.is-checked+.el-checkbox__label{
  color: $border-color-focus;
}
.el-checkbox__inner::after{
  box-sizing: content-box;
  content: "";
  border: 2px solid #FFF;
  border-left: 0;
  border-top: 0;
  height: 7px;
  left: 4px;
  position: absolute;
  top: 0px;
}
.el-checkbox__input.is-disabled .el-checkbox__inner {
  background-color:$disabled-bg;
  border-color: $disabled-border;
}
.el-checkbox__input.is-disabled+span.el-checkbox__label{
  color:$disabled-color;
}
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner:after{
  color:$disabled-color;
}

//单选
//*******************************
.el-radio__input.is-checked .el-radio__inner{
  background: $border-color-focus;
  border-color: $border-color-focus;
}

.el-radio__input.is-checked+.el-radio__label{
  color:$border-color-focus;
}

.el-radio__label{
  line-height: 20px;
}
.el-checkbox__input{
    margin-top: 2px;
}
.el-radio__input{
    margin-top: 3px;
}

.el-checkbox{
  white-space: break-spaces;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.el-radio{
  white-space: break-spaces;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.el-radio__inner::after{
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background-color: $border-color-focus;
  content: "";
  border: 2px solid #ffffff;
}

.el-radio__input.is-disabled .el-radio__inner, .el-radio__input.is-disabled.is-checked .el-radio__inner{
  background-color: $disabled-bg;
  border-color: $disabled-border;
}
.el-radio__input.is-disabled+span.el-radio__label{
  color:$disabled-color;
}
.el-radio__input.is-disabled.is-checked .el-radio__inner:after {
  background-color:$disabled-bg ;
}

//必填表单验证
//*******************************
.el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus{
  border-color: $form-red;
}
.el-form-item__error{
  color: $form-red;
}
.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before{
  color: $form-red;
}
.el-form-item.is-error .el-input__validateIcon{
  color: $form-red;
}


//单选按钮
//*******************************
.el-radio-button__inner{
  padding: 10px 20px;
}
.el-radio-button__orig-radio:checked+.el-radio-button__inner{
  background-color: $border-color-focus;
  border-color: $border-color-focus;
}
.el-radio-button__orig-radio:hover+.el-radio-button__inner{
  background-color: $border-color-focus;
  border-color: $border-color-focus;
  color: #ffffff;
}
.el-radio-button__orig-radio:disabled+.el-radio-button__inner{
  background-color: $disabled-bg;
  color: $disabled-color;
  border-color: $disabled-border;
}

//多选按钮
//*******************************
.el-checkbox-button__inner{
  padding: 10px 20px;
}
.el-checkbox-button.is-checked:first-child .el-checkbox-button__inner{
  background-color: $border-color-focus;
  border-color: $border-color-focus;
}
.el-checkbox-button.is-checked .el-checkbox-button__inner{
  background-color: $border-color-focus;
  border-color: $border-color-focus;
  color: #ffffff;
}
.el-checkbox-button:hover .el-checkbox-button__inner{
  background-color: $border-color-focus;
  border-color: $border-color-focus;
  color: #ffffff;
}
.el-checkbox-button.is-disabled .el-checkbox-button__inner{
  background-color: $disabled-bg;
  color: $disabled-color;
  border-color: $disabled-border;
}

//级联选择器
//*******************************
.el-cascader{
  width: 100%;
}
.el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path{
  background-color: #f5f5f5;
  color: $border-color-focus;
}
.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover{
  background-color: #f5f5f5;
  color: $border-color-focus;
}

//新加表单样式
//*******************************
.dd-input-box{
  .title{
    color: #656565;
    text-align: right;
    line-height: 34px;
    margin: 0;
  }

}
.dd-input-box.must{
  .title span{
    color: $form-red;
    font-weight: bold;
    margin-right: 5px;
  }
  .el-input__inner{
    border-color: $form-red;
  }
}

.el-form-item{
  margin-bottom: 15px;
}

//.dd-form{
//  .el-form-item{
//    width: 100%;
//    display: flex;
//    flex-direction: row;
//    align-items: center;
//    margin-bottom: 20px;
//    margin-right: 0;
//  }
//  .el-form-item__content{
//    display: flex;
//    flex-direction: row;
//    align-items: center;
//    line-height: 36px;
//    width: 100%;
//  }
//  .el-form-item__label{
//    line-height: 18px;
//  }
//  .el-select{
//    width: 100%;
//  }
//  .dd-choose{
//    line-height: 36px;
//  }
//  .dd-textarea{
//    align-items: flex-start;
//  }
//  .dd-form-center{
//    height: 36px;
//  }
//}



//.dd-inline-form4{
//  .el-form-item{
//    display: flex;
//    flex-direction: row;
//    align-items: center;
//    margin-bottom: 15px;
//  }
//  .el-form-item__label{
//    width: 40%;
//    line-height: 20px;
//  }
//  .el-form-item__content{
//    width: 100%;
//  }
//  .el-select{
//    width: 100%;
//  }
//}
//
//.dd-inline-form3{
//  .el-form-item{
//    display: flex;
//    flex-direction: row;
//    align-items: center;
//    margin-bottom: 15px;
//
//  }
//  .el-form-item__label{
//    width: 50%;
//    line-height: 20px;
//  }
//  .el-form-item__content{
//    width: 100%;
//  }
//  .el-select{
//    width: 100%;
//  }
//}
//
//.dd-inline-form2{
//  .el-form-item{
//    display: flex;
//    flex-direction: row;
//    align-items: center;
//    margin-bottom: 15px;
//
//  }
//  .el-form-item__label{
//    width: 20%;
//    line-height: 20px;
//  }
//  .el-form-item__content{
//    width: 100%;
//    .el-input{
//      width: 60%;
//    }
//  }
//  .el-select{
//    width: 100%;
//  }
//}
//
//.dd-textarea{
//  width: 100%;
//  .el-form-item__content{
//    width: 80%;
//  }
//}

//@media screen and (max-width: 1400px) {
//  .dd-inline-form4{
//    .el-form-item{
//      display: flex;
//      flex-direction: row;
//      align-items: center;
//      margin-bottom: 15px;
//      margin-right: 2%;
//      width: 90%;
//    }
//    .el-form-item__label{
//      width: 28%;
//      line-height: 20px;
//      padding: 0 2% 0 0;
//    }
//    .el-form-item__content{
//      width: 60%;
//    }
//    .el-select{
//      width: 100%;
//    }
//  }
//
//  .dd-inline-form3{
//    .el-form-item{
//      display: flex;
//      flex-direction: row;
//      align-items: center;
//      margin-bottom: 15px;
//      margin-right: 2%;
//      width: 90%;
//    }
//    .el-form-item__label{
//      width: 48%;
//      line-height: 20px;
//      padding: 0 2% 0 0;
//    }
//    .el-form-item__content{
//      width: 40%;
//    }
//    .el-select{
//      width: 100%;
//    }
//  }
//
//  .dd-inline-form2{
//    .el-form-item{
//      display: flex;
//      flex-direction: row;
//      align-items: center;
//      margin-bottom: 15px;
//      margin-right: 2%;
//      width: 90%;
//    }
//    .el-form-item__label{
//      width: 18%;
//      line-height: 20px;
//      padding: 0 2% 0 0;
//    }
//    .el-form-item__content{
//      width: 70%;
//      .el-input{
//        width: 60%;
//      }
//    }
//    .el-select{
//      width: 100%;
//    }
//  }
//
//  .dd-textarea{
//    width: 100%;
//    .el-form-item__content{
//      width: 80%;
//    }
//  }
//}
//
//
//
//








